<template>
  <div v-analytics.pageview>
    <topbar category="Input Code Page" :nextAction="nextAction" rightTitle="Next"></topbar>
    <div class="login-content">
      <label class="login-label" :class="$style.label">Input Verification code</label>
      <p class="fz-12 red-color" v-show="!countDownTime" @click="getVerifyCode">Resend Verification Code</p>
      <p class="fz-12" v-show="countDownTime">Resend after {{countDownTime}}s</p>
      <div
        :class="$style.verifyCodeInputs"
        v-analytics.click="{
          action: 'Input Code',
          category: 'Input Code Page',
        }"
      >
        <input
          type="text"
          pattern="\d*"
          v-model="form[n]"
          class="form-control"
          maxlength="1"
          v-for="n in 4"
          ref="inputs"
          @keyup.delete="keyupDelHandler(n)"
          @focus="focusHandler(n)"
        />
      </div>
      <p :class="$style.tip">
        Not receive code?
        <a
          @click="goEmail"
          class="red-color"
          v-analytics.click="{
            action: 'Sign Up With Email Click',
            category: 'Input Code Page',
          }"
        >
          Sign up with email
        </a>
      </p>
    </div>
    <loading :show="showLoading" />
  </div>
</template>
<script>
import Vue from 'vue'
import { toast, loading, topbar } from 'components'

export default {
  name: 'verifyCode',
  components: {
    topbar,
    toast,
    loading,
  },
  data() {
    return {
      inputCode: 'Input Verification code',
      areaCode: '',
      mobileText: '',
      countDownTime: 0, // 倒数记时
      verificationCode: '',
      showLoading: false,
      form: {
        1: '',
        2: '',
        3: '',
        4: '',
      },
      isHandleKeyUpDel: true, // 是否处理键盘del事件
    }
  },
  mounted() {
    this.areaCode = this.$route.query.areaCode
    this.mobileText = this.$route.query.mobile
    this.getVerifyCode()
    Vue.nextTick(() => {
      this.$refs.inputs[0].focus()
    })
  },
  watch: {
    form: {
      handler(val) {
        /* eslint-disable */
        for (const key in val) {
          if (val[key] === '') {
            this.$refs.inputs[key - 1].focus()
            return
          }

          if (key === '4') {
            const ret = Object.values(val).join('')
            this.verificationCode = ret
            this.nextAction()
            return
          }
        }
      },
      deep: true,
    },
  },
  methods: {
    focusHandler(n) {
      // console.log('fff', n)
      if (this.form[n]) {
        this.isHandleKeyUpDel = false
      } else {
        this.isHandleKeyUpDel = true
      }
    },
    keyupDelHandler(n) {
      const index = n - 1
      // console.log(n, this.form[n], this.isHandleKeyUpDel)
      if (this.isHandleKeyUpDel && !this.form[n] && (index - 1 ) >= 0) {
        Vue.nextTick(() => {
          this.$refs.inputs[index - 1].focus()
        })
      }
    },
    nextAction() {
      if (this.verificationCode) {
        this.showLoading = true
        this.$store.dispatch('checkVercode', {
          areaCode: this.areaCode,
          mobile: this.mobileText,
          verificationCode: this.verificationCode,
        })
        .then((res) => {
          this.showLoading = false
          if (res.code === 1000) {
            this.$router.push({
              path: '/login/passwd',
              query: {
                areaCode: this.areaCode,
                mobile: this.mobileText,
                verificationCode: this.verificationCode,
              },
            })
          } else {
            toast(res.info)
          }
        })
      } else {
        toast('Please enter the verification code')
      }
    },
    getVerifyCode() {
      this.countDownTime = 180
      this.timer = setInterval(() => {
        this.countDownTime -= 1
        if (this.countDownTime === 0) {
          clearInterval(this.timer)
        }
      }, 1000)
    },
    goEmail() {
      this.$router.push({
        path: '/login/byEmail',
      })
    },
    redirect() {
      if (sessionStorage.redirect) {
        const redirectUrl = sessionStorage.redirect
        this.$router.replace({ path: redirectUrl })
      }
    },
  },
}
</script>

<style module lang="scss">
.section {
  width: 100%;
}

.content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding-top: 16px;
  p {
    text-align: center;
  }
}

.verifyCodeLabel {
  padding-top: 24px;
}

.verifyCodeInput {
  padding-top: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 90px;
  padding-right: 90px;
}

.countDownTime {

}

.inputContent {
  flex: 1;
  height: 48px;
  margin-left: 12px;
  input {
    -webkit-appearance: none;
    border-radius: 4px;
    font-size: 30px;
    width: 100%;
    text-align: center;
    height: 100%;
    display: block;
    border: 0;
    border: 1px solid #4a4a4a;
    background-color: #fff;
  }
  focus {
    border: 1px solid #e7e7e7;
  }
}

.emailContent {
  padding-top: 24px;
}

.label {
  margin-top: 16px;
  margin-bottom: 24px !important;
}

.tip {
  font-size: 12px;
  margin-top: 24px;
}

.verifyCodeInputs {
  margin-left: auto;
  margin-right: auto;
  margin-top: 12px;
  display: flex;
  width: 180px;
  flex-direction: row;
  input {
    height: 48px;
    text-align: center;
    font-size: 30px;
    padding: 0;
    &:not(:first-child) {
      margin-left: 12px;
    }
    &:focus {
      border-color: #FF464E;
      box-shadow: 0 0 1px #FF464E;
    }
  }
}
</style>
